// 引入 vue-router 的核心方法
import { createRouter, createWebHistory } from 'vue-router'
// 引入各个页面组件
import Home from '../view/Home.vue' // 首页组件
import ArticleList from '../view/ArticleList.vue' // 文章列表页组件
import ArticleDetail from '../view/ArticleDetail.vue' // 文章详情页组件
import Editor from '../view/Editor.vue' // 编辑器页组件

// 定义路由表，每个对象代表一个路由规则
const routes = [
  { 
    path: '/', // 路径为根路径时，显示 Home 组件
    component: Home 
  },
  { 
    path: '/articles', // 路径为 /articles 时，显示 ArticleList 组件
    component: ArticleList 
  },
  { 
    path: '/article/:id', // 路径为 /article/某个id 时，显示 ArticleDetail 组件
    component: ArticleDetail, 
    props: true // 将路由参数作为 props 传递给组件，方便组件内部获取 id
  },
  { 
    path: '/editor', // 路径为 /editor 时，显示 Editor 组件
    component: Editor 
  }
]

// 创建路由实例，使用 HTML5 的 history 模式
const router = createRouter({
  history: createWebHistory(), // 路由模式：history（地址栏无#号）
  routes // 路由表
})

export default router // 导出路由实例，供 main.js 引入使用
